<template>
  <div id="scroll-list">
    <div v-for="(item,index) in topics.records" :key="index" style="margin-bottom: 2vh">
      <div id="user-info">
        <div id="avatar">
          <img :src="item.headimgurl"/>
        </div>
        <div style="padding-left: 4vw;width: 40vh">
          <div id="nickname">
            {{ item.userName }}
          </div>
          <div id="level">
            1级
          </div>
        </div>
      </div>
      <div id="content">
        <span>#{{ item.subjectName }}#</span>
        {{ item.content }}
      </div>
      <div id="comment-wrapper">
        <div id="comment-list">
          <div class="feed-subject-wrap" v-for="(entry,index) in item.commentList" :key=index>
            <span style="color: #576895;" @click="createComment('comment',entry)">#{{ entry.fromUserId }}@</span>
            <span style="color: #576895">#{{ entry.toUserName }}</span>
            <div class="feed-subject-wrap-content">{{ entry.content }}</div>
          </div>
        </div>
        <div id="comment-action-btn">
          <img :src="comment_selected_img" @click="autofocus()"/>
          <span>评论</span>
        </div>
        <div style="margin-top: 10px">
          <input type="text" placeholder="测试">
        </div>
      </div>
      <div id="line"></div>
    </div>
    <div>
      <input id="comment-box" ref="comment-box" type="text" placeholder="评论">
    </div>
  </div>
</template>

<script>
import comment_default_img from '@/assets/comment_default.svg'
import comment_selected_img from '@/assets/comment_selected.svg'

export default {
  name: "TopicList",
  data() {
    return {
      comment_default_img: comment_default_img,
      comment_selected_img: comment_selected_img,
      topics: []
    }
  }, mounted() {
    this.getTopics();
  }, methods: {
    getTopics() {
      this.$axios.post(this.global.community_server_url + '/topic/list?current=0&size=10', {}).then((response) => {
        let code = response.data.code
        if (code == 200) {
          this.topics = response.data.data;
          console.log(this.topics)
        } else {
          console.error(response);
        }
        //请求成功返回的数据
      }).catch((error) => {
        console.log(error)
      })
    },
    createComment(type, data) {
      this.$store.state.comment.type = type;
      if (type == "topic") {
        this.$store.state.comment.topic = data;
      } else if (type == "comment") {
        this.$store.state.comment.comment = data;
      }
      this.$router.push("/comment/push")
    },
    autofocus(){
      console.log("自动聚焦")
      console.log(this.$refs["comment-box"])
    }
  }
}
</script>

<style scoped>
#scroll-list {
  height: auto;
}

#user-info {
  display: flex;
  align-items: center;
  width: 100%;
  height: 12vh;
}

#avatar {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 15vw;
  height: 15vw;
  border-radius: 15vw;
  border: 2px solid white;
}

#avatar img {
  width: 10vw;
  height: 10vw;
  border: 1px solid blue;
  border-radius: 5vw;
}

#nickname {
  font-size: 4vw;
  font-family: "Hiragino Sans GB";
  color: olivedrab;
  text-align: left;
  margin-bottom: 1vh;
}

#level {
  color: slateblue;
  text-align: left;
  font-size: 3vw;
}

#content {
  padding: 2vh 1vh 2vh 1vw;
  font-size: 5vw;
  font-weight: 400;
  color: black;
}

#content span {
  font-size: 5vw;
  font-weight: 600;
  color: #576895;
}

#comment-list {
  font-size: 4vw;
  font-family: "Microsoft YaHei";
  color: darkblue;
}

.feed-subject-wrap-content {
  display: inline;
  font-size: 4vw;
  color: #444;
  margin-left: 2vw;
}

#comment-action-btn {
  display: flex;
  align-items: center;
  margin-top: 10px;
}

#comment-action-btn img {
  width: 5vw;
  height: 5vw;
}

#comment-action-btn span {
  font-size: 3vw;
  margin-left: 5px;
}

#line {
  margin-top: 3vh;
  height: 0.1vh;
  background-color: pink;
}

#comment-box {
  width: 100%;
  height: 10vh;
  text-align: center;
  line-height: 10vh;
  background: #2c3e50;
}
</style>